<template>
    <div class="app-wrap">
        <div class="login_content">
            <div class="login_head">
                <div>
                    <nuxt-link to="/">
                        <img class="logo" src="@/assets/images/logo.png" />
                    </nuxt-link>
                </div>
                <div class="return_shop">
                    <nuxt-link to="/">返回商城</nuxt-link>
                </div>
            </div>
            <div class="login_input_flex">
                <div class="login_input_view register">
                    <div class="login_type">用户注册</div>
                    <el-form ref="form" :model="form" class="login_input_value" :rules="rules" :show-message="false">
                        <el-form-item prop="mobile" >
                            <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                        <el-form-item class="code-box" prop="code" >
                            <el-input v-model="form.code" placeholder="请输入验证码"></el-input>
                            <div class="send_code" @click="SendSms" v-if="isCountdownOver">获取验证码</div>
                            <div class="send_code" v-else>{{ countdown + "秒后重新发送" }}</div>
                        </el-form-item>
                        <el-form-item class="code-box" prop="partner_ids" >
                            <el-select v-model="form.partner_id" multiple  placeholder="请选择合作产品">
                                <el-option v-for="(item,index) in partners" 
                                    :key="index" 
                                    :value="item.id"
                                    :label="item.name"    
                                >
                                </el-option>
                                <!-- <el-option label="请选择合作产品" value="2"></el-option> -->
                            </el-select>
                        </el-form-item>
                        <el-form-item class="code-box" prop="captcha" >
                            <el-input v-model="form.captcha" placeholder="请输入图形验证"></el-input>
                            <div class="send_code imgcode">
                                <!-- 验证码 -->
                                <img :src="captcha" @click="RefreshCaptcha" />
                            </div>
                        </el-form-item>
                        <el-form-item prop="password" >
                            <el-input type="password" show-password v-model="form.password" autocomplete="off" placeholder="设置密码"></el-input>
                        </el-form-item>
                        <div class="pass_text">
                            <span class="el-icon-warning"></span>
                            <span>设置8-20位密码，数字字母组合，不区分大小写</span>
                        </div>
                        <el-form-item>
                            <el-button class="login_button" round @click="RegisterHandler">立即注册</el-button>
                        </el-form-item>
                    </el-form>
                    <div class="register_account">
                        <nuxt-link to="/memberCenter/login">返回登录</nuxt-link>
                    </div>
                </div>
                <div class="copyright">Copyright © 2002-2023 {{ siteInfo.site_name }}. All Rights Reserved. {{ siteInfo.site_beian }}.</div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapActions } from 'vuex';
import common from "@/api/common";
import { validatePhone } from "@/utils/common";
export default {
    name:"user-register",
    layout: "register",
    data() {
        var validateTel = (rule, value, callback) => {
            if (validatePhone(value)) {
                callback()
            } else {
                callback(new Error("手机号格式不正确"));
            }
        };
        return {
            partners:[],
            form: {
                mobile: "", // 手机号
                password: "", // 密码
                code: "", // 手机验证码
                captcha: "", // 图形验证码
                partner_id: [], // 合作产品ids
                uniqid: "",
                partner_ids: ""
            },
            captcha:"",
            uniqid: "",
            rules: {
                mobile: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { validator: validateTel, trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入账号密码', trigger: 'blur' },
                    { min: 8, max: 20, message: '密码长度在 8 到 20 个字符', trigger: 'blur' }
                ],
                code: [
                    { required: true, message: '请输入手机验证码', trigger: 'blur' },
                ],
                captcha: [
                    { required: true, message: '请输入图片验证码', trigger: 'blur' },
                ],
                partner_id: [
                    { required: true, message: '请选择合作产品', trigger: 'change' },
                ]
            },
            initialCountdown: 60, // 初始倒计时秒数
            countdown: 60, // 当前倒计时秒数
            isCountdownOver: true, // 是否倒计时已结束
        };
    },
    mounted: function(){
        // 头部加载一次以后直接使用
        this.GetSiteInfo()
    },
    created(){
        this.doloadData();
        // this.startCountdown();
    },
    computed:{
        siteInfo(){
            return this.$store.state.site
        }
    },
    methods: {
        ...mapActions(['GetSiteInfo','UserRegister']),
        doloadData:function(){
            let _this = this;
            common.GetPartners()
               .then(res => {
                    _this.partners = res.data;
                });
            this.RefreshCaptcha();
        },
        // 开始计时
        startCountdown() {
        // 使用定时器每秒更新倒计时值
            const countdownTimer = setInterval(() => {
                if (this.countdown > 0) {
                    this.countdown--;
                } else {
                    clearInterval(countdownTimer); // 清除定时器
                    this.isCountdownOver = true; // 设置倒计时结束标志
                    this.countdown = this.initialCountdown;
                }
            }, 1000);
        },
        // 点击发送手机验证码
        SendSms: function () {
            if (validatePhone(this.form.mobile)) {
                var input = {
                    event: "register",
                    mobile: this.form.mobile
                }
                common.SendSms(input)
                    .then(res => {
                        this.$message.success("发送成功");
                        this.isCountdownOver = false;
                        this.startCountdown();
                    }).catch((err) => {
                        
                    })
            } else {
                this.$message.warning("请输入正确的手机号");
            }
        },
        // 点击注册
        RegisterHandler:function(){
            let _this = this;
            _this.$refs.form.validate((valid) => {
                if (valid)
                {
                    _this.form.partner_ids = _this.form.partner_id.join(",");
                    _this.UserRegister(_this.form)
                        .then(res => {
                            // 注册成功后需要调用登录
                            // 成功之后弹窗
                            _this.form.partner_id = "";
                            _this.$refs.form.resetFields();
                            alert("这里以后要弹窗，这里需要处理！")
                        });
                }
                else
                {
                    const errors = _this.$refs.form.fields.filter(field => field.validateState === "error").map(x => x.validateMessage);
                    _this.$message.warning(errors[0]);
                }
            });
        },
        // 刷新二维码
        RefreshCaptcha:function(){
            let _this = this;
            common.GetCaptcha({}).then(res => {
                _this.captcha = res.data.src
                _this.form.uniqid  = res.data.uniqid
            });
        }
    }
};
</script>
<style>
    @import url(@/assets/css/login.css);
</style>